<template>
  <div>
    <a-row :gutter="16" style="margin-right: 16px;margin-left: 16px;">
      <a-col
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 8 }"
        :xl="{ span: 8 }"
        :xxl="{ span: 8 }"
        style="margin-top: 20px;"
      >
        <a-card :bordered="false">
          <a-card style="text-align:center;" :bordered="false">
            <a-avatar :size="112" :src="userInfo.avatar" icon="user" />
            <div class="username">{{ userInfo.username }}</div>
            <div class="description">{{ userInfo.description }}</div>
            <div class="">{{ userInfo.email }}</div>
          </a-card>
          <a-card>
            <a-descriptions :column="1">
              <a-descriptions-item label="姓名">
                {{ studentInfo.name }}
              </a-descriptions-item>
              <a-descriptions-item label="学号">
                {{ studentInfo.code }}
              </a-descriptions-item>
              <a-descriptions-item label="年级">
                {{ studentInfo.className }}
              </a-descriptions-item>
              <a-descriptions-item label="学院">
                {{ studentInfo.college }}
              </a-descriptions-item>
              <a-descriptions-item label="专业">
                {{ studentInfo.major }}
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-card>
      </a-col>
      <a-col
        :xs="{ span: 24 }"
        :sm="{ span: 24 }"
        :md="{ span: 24 }"
        :lg="{ span: 16 }"
        :xl="{ span: 16 }"
        :xxl="{ span: 16 }"
        style="margin-top: 20px;"
      >
        <a-card
          style="width:100%"
          :tab-list="tabListNoTitle"
          :active-tab-key="noTitleKey"
          @tabChange="key => onTabChange(key, 'noTitleKey')"
        >
          <p v-if="noTitleKey === 'grade'">
            <a-row :gutter="16">
              <a-col :span="6">
                <a-card hoverable>
                  <img
                    slot="cover"
                    alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                  />
                  <template slot="actions" class="ant-card-actions">
                    <a-icon key="setting" type="setting" />
                    <a-icon key="edit" type="edit" />
                    <a-icon key="ellipsis" type="ellipsis" />
                  </template>
                  <a-card-meta title="单片机考试" description="100分">
                  </a-card-meta>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card hoverable>
                  <img
                    slot="cover"
                    alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                  />
                  <template slot="actions" class="ant-card-actions">
                    <a-icon key="setting" type="setting" />
                    <a-icon key="edit" type="edit" />
                    <a-icon key="ellipsis" type="ellipsis" />
                  </template>
                  <a-card-meta title="计算机组成原理" description="98分">
                  </a-card-meta>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card hoverable>
                  <img
                    slot="cover"
                    alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                  />
                  <template slot="actions" class="ant-card-actions">
                    <a-icon key="setting" type="setting" />
                    <a-icon key="edit" type="edit" />
                    <a-icon key="ellipsis" type="ellipsis" />
                  </template>
                  <a-card-meta title="C++ Prime" description="80分">
                  </a-card-meta>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card hoverable>
                  <img
                    slot="cover"
                    alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                  />
                  <template slot="actions" class="ant-card-actions">
                    <a-icon key="setting" type="setting" />
                    <a-icon key="edit" type="edit" />
                    <a-icon key="ellipsis" type="ellipsis" />
                  </template>
                  <a-card-meta title="大学英语4" description="71分">
                  </a-card-meta>
                </a-card>
              </a-col>
            </a-row>
          </p>
          <p v-else-if="noTitleKey === 'exam'">
            <a-list
              item-layout="vertical"
              size="large"
              :pagination="pagination"
              :data-source="listData"
            >
              <div slot="footer"><a href="">更多请查看详情页</a></div>
              <a-list-item slot="renderItem" key="item.title" slot-scope="item">
                <template v-for="{ type, text } in actions" slot="actions">
                  <span :key="type">
                    <a-icon :type="type" style="margin-right: 8px" />
                    {{ text }}
                  </span>
                </template>
                <img
                  slot="extra"
                  width="272"
                  alt="logo"
                  src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                />
                <a-list-item-meta :description="item.description">
                  <a slot="title" :href="item.href">{{ item.title }}</a>
                  <a-avatar slot="avatar" :src="item.avatar" />
                </a-list-item-meta>
                {{ item.content }}
              </a-list-item>
            </a-list>
          </p>
          <p v-else-if="noTitleKey === 'notice'">
            <a-list item-layout="horizontal" :data-source="data">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta
                  style="font-size: 12px;"
                  :description="item.time"
                >
                  <a slot="title" class="title">{{ item.title }}</a>
                  <a-avatar
                    slot="avatar"
                    :size="48"
                    :src="item.avatar"
                  ></a-avatar>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </p>
          <a slot="tabBarExtraContent" href="#">More</a>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
const listData = [];
for (let i = 0; i < 23; i++) {
  listData.push({
    href: "https://www.antdv.com/",
    title: `我的考试 ${i}`,
    avatar:
      "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
    description: `这是第 ${i} 个测试 组件的内容`,
    content: `这是第 ${i} 个测试 组件的内容`
  });
}

const data = [
  {
    title: "你收到了 14 份新周报",
    avatar:
      "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
    time: "2020-10-04 22:17:25"
  },
  {
    title: "你推荐的 曲妮妮 已通过第三轮面试",
    avatar:
      "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
    time: "2020-10-04 22:17:26"
  },
  {
    title: "这种模板可以区分多种通知类型",
    avatar:
      "https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
    time: "2020-10-04 22:17:27"
  },
  {
    title: "左侧图标用于区分不同的类型",
    avatar:
      "https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
    time: "2020-10-04 22:17:28"
  }
];
export default {
  data() {
    return {
      tabListNoTitle: [
        {
          key: "exam",
          tab: "我的考试"
        },
        {
          key: "grade",
          tab: "我的成绩"
        },
        {
          key: "notice",
          tab: "我的通知"
        }
      ],
      noTitleKey: "exam",
      listData,
      data,
      pagination: {
        onChange: page => {
          console.log(page);
        },
        pageSize: 3
      },
      actions: [
        { type: "star-o", text: "0" },
        { type: "like-o", text: "0" },
        { type: "message", text: "0" }
      ],
      userInfo: {
        username: "",
        email: "",
        description: "",
        avatar: "",
        id: ""
      },
      studentInfo: {
        id: "",
        className: "",
        code: "",
        college: "",
        major: "",
        name: ""
      }
    };
  },
  created() {
    this.getUserInfo();
    this.getStudentInfo();
  },
  methods: {
    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
    },
    getUserInfo() {
      this.$axios
        .get("/get/User/info", {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            // 获取完数据之后 给userInfo赋值
            this.userInfo.username = res.data.data.username;
            this.userInfo.email = res.data.data.email;
            this.userInfo.description = res.data.data.description;
            this.userInfo.avatar = res.data.data.avatar;
            this.userInfo.id = res.data.data.id;
            console.log(this.userInfo);
            // console.log(res.data.data);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    getStudentInfo() {
      this.$axios
        .get("/get/student/owner/info", {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            // 获取完数据之后 给userInfo赋值
            this.studentInfo.className = res.data.data.className;
            this.studentInfo.code = res.data.data.code;
            this.studentInfo.college = res.data.data.college;
            this.studentInfo.major = res.data.data.major;
            this.studentInfo.name = res.data.data.name;
            this.studentInfo.id = res.data.data.id;
            // console.log(res.data.data);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    }
  }
};
</script>

<style scoped>
.username {
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  margin-top: 10px;
}
.description {
  font-size: 18px;
  font-weight: 900;
}
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  line-height: 24px;
}
.ant-list-item-meta-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 22px;
}
</style>
